<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>DataBase</title>
</head>
<body>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<div id="app">
    <p>数据库名称</p>
    <input v-model="dbName">
    <p>IP地址</p>
    <input v-model="ip">
    <p>端口号</p>
    <input v-model="port">
    <p>用户名</p>
    <input v-model="userName">
    <p>密码</p>
    <input v-model="password">
    <button v-on:click="exportData">下载</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            dbName: 'mysql',
            ip: '192.168.39.114',
            port: '3306',
            userName: 'root',
            password: '1qaz!QAZ'
        },
        methods: {
            exportData: function (event) {
                var params = {
                    dbName: this.dbName,
                    ip: this.ip,
                    port: this.port,
                    userName: this.userName,
                    password: this.password
                };
                axios
                    .post('/exportExcel', params)
                    .then(function (response) {
                        if (response.data.code != 1) {
                            console.log(response.data.msg);
                        } else {
                            var data = response.data.data.replace(/[\n\r]/g, "");
                            var raw = window.atob(data);
                            let rawLength = raw.length;
                            let uInt8Array = new Uint8Array(rawLength);
                            for (let i = 0; i < rawLength; ++i) {
                                uInt8Array[i] = raw.charCodeAt(i);
                            }
                            const blob = new Blob([uInt8Array], { type: 'application/vnd.ms-excel;charset=utf-8' });
                            if (window.navigator.msSaveOrOpenBlob) {
                                navigator.msSaveOrOpenBlob(blob, params.dbName + '.xlsx')
                            } else {
                                const url = window.URL.createObjectURL(blob);
                                const link = document.createElement('a');
                                link.href = url;
                                link.setAttribute('download', params.dbName + '.xlsx');
                                link.click();
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
</script>
</body>
</html>
